<template>
  <div class="container">
    <div class="top">
       <div class="from">
        <MyFrom/>
       </div>
    </div>
    <div class="center">
       <div class="table">
        <MyTable :tablelist="tablelist"/>
        </div>
       <div class="list"><MyList :list="list" @parentsearch="parentsearch" @addData="addData"/></div>
    </div>
    <div class="bottom">
      <p class="el-icon-ship">处方调用</p>
      <p class="el-icon-moon-night">打印处方</p>
      <p class="el-icon-orange">存为模板</p>
      <el-button type="primary" class="el-icon-download" @click="download">保存</el-button>
      <el-button type="warning" class="el-icon-bangzhu">收费</el-button>
      <el-button type="warning" class="el-icon-delete">结束就诊</el-button>
    </div>
  </div>
</template>

<script>
import MyFrom from './components/MyFrom'
import MyTable from './components/MyTable'
import MyList from './components/MyList'
import {getNewvisitData,getMyTableData,addDataApi} from '../../api/NewvisitApi'
import {export_json_to_excel} from '../../utils/ExcelUtils.js'
export default {
  data(){
    return{
      list:[],
      keywords:'',
      tablelist:[],
      obj:{},
    }
  },
  components:{
    MyFrom,MyTable,MyList
  },
  mounted() {
    this.initGetNewvisitData();
    this.initGetMyTableData();
  },
  methods: {
    formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => {
              return v[j]
          }))
      },
    download(){
      // 导出execl
      // 自定义头部
          const theader = ['序号','组号','名称','单次用量/口服','频度','天数','总量','单价']
          // 自定义字段
          const filterVal = ['id','groupnumber','name','once','frequency','date','total','price']
         getMyTableData().then(res => {
            if(res.code == 200){
              const data = this.formatJson(filterVal,res.data);
               export_json_to_excel({
                header:theader,//execl头部列表
                data, //数据
                filename:'处方',//文件名称
                autoWidth:true, //自适应宽度
                bookType:'xlsx' //文件类型

          })
            }
         })
    },
    parentsearch(val){
      this.keywords = val
      this.initGetNewvisitData()
    },
   initGetNewvisitData(){
    getNewvisitData({keywords:this.keywords}).then(res=>{
      console.log(res);
      if(res.code==200){
        this.list = res.data
      }
    })
   },
   initGetMyTableData(){
    getMyTableData().then(res =>{
      if(res.code==200){
        console.log(res);
        this.tablelist = res.data
      }

    })
   },
   addData(val){
    // this.obj = val
    var [obj]= val;
      addDataApi(obj).then(res=>{
        console.log("res:",res);
        if(res.code==200){
           this.$message({
              message: res.msg,
              type: 'success'
            });
          // console.log(12313213123123);
          this.initGetMyTableData();
          
        }
      })
   }
  },
}
</script>

<style lang="less" scoped>
.center{
    //  width: 1250px;
    //  height: 400px;
     background-color: #fff;
     padding: 20px;
     border-radius: 10px;
     margin-top: 20px;
     display: flex;
    //  align-items: center;
     justify-content: space-around;
    
}
.bottom{
    //  width: 1250px;
    //  height: 30px;
     background-color: #fff;
     padding: 20px;
     border-radius: 10px;
     margin-top: 20px;
     display: flex;
     align-items:center;
     justify-content: right;
     p{
      margin-right: 10px;
     }
     button{
      width: 100px;
      margin-right: 10px;
     }
}
.table{
  width: 850px;
  height: 342px;
  margin-right: 20px;
}
.list{
  width: 420px;
}
</style>